<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<script src="./node_modules/redux/dist/redux.js"></script>
	<script>
		let reducer = (state,action)=>{
			switch (action.type) {
				case "ADDTODO":
					return Object.assign( 
						{},
						state,
						{ todos:[...state.todos,{
							title: action.title,
							content: action.content
						}] }
					);
					break;
				case "DELTODO":
					return Object.assign(
						{},
						state,
						{
							todos: state.todos.filter( item=>item.title!==action.title )
						}
					)
					break;
				case "CHANGEFILTER":
					return Object.assign(
						{},
						state,
						{ filterStr: action.filterStr }
					)
					break;
				default:
					return state;
					break;
			}
		};
		// 初始数据
		let initTodo = {
			todos: [
				{
					title:"react",
					content:"学习react"
				},
				{
					title:"js",
					content:"学习js"
				}
			],
			filterStr: "ALL"
		}
		let store = Redux.createStore( reducer, initTodo );

		// actionCreater 该 函数 只是为了创造一个action 对象返回出来
		let add = (title,content)=>({
			type: "ADDTODO",
			title,
			content
		})

		let del = (title)=>({
			type: "DELTODO",
			title
		})

		let changeStr = (filterStr)=>({
			type: "CHANGEFILTER",
			filterStr
		})

		//添加一条 todo
		store.dispatch( add( "js","学习js" ) );
		store.dispatch( add( "css","学习css" ) );

		// 删除指定 todo
		store.dispatch( del("js") );
		store.dispatch( del("html") );

		// 修改 筛选规则
		store.dispatch( changeStr("UNCOMPLETE") );

		console.log( store.getState() );

		// store.dispatch({
		// 	type: "ADDTODO",
		// 	payload: {
		// 		title: "html",
		// 		content: "学习html"
		// 	}
		// })


	</script>

</body>
</html>